<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Contact — <{:C('site_title')}></title>
<meta name="keywords" content="<{:C('site_keyword')}>">
<meta name="description" content="<{:C('site_content')}>">
<include file="Public:cssjs" />
<link rel="stylesheet" href="<{:RES}>/css/in.css">
<script type="text/javascript" src="<{:STATICS}>/js/jquery.artDialog.js?skin=aero"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.form.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<{:RES}>/js/contact.js"></script>
</head>

<body>
<include file="Public:mobilemenu" />

<div id="siteWrapper">	
	<include file="Public:menu" />
	<div class="contactBanner">	
		<img src="<{:RES}>/image/contact.jpg" class="banner-image" />
		<div class="mask"></div>
		<div class="s-text">CONTACT</div>		
	</div>
	
	<div class="main">		
		<div class="contact">
			<div class="c-title">CALL OR VISIT US!</div>
			<div class="onepage"><{$list.content|htmlspecialchars_decode=###}></div>
		</div>
		
		<div class="mapBox">
			<div class="contactMap">
				<div class="hd">HEADQUARTERS</div>
				<div class="googleMap" id="googleMap"></div>				
				<div class="bd">
					<p>99 South Almaden Blvd. Suite 600</p>
					<p>San Jose, CA 95113</p>
					<p>(669) 231-8738</p>
				</div>
			</div>

			<div class="contactMap">
				<div class="hd">GEORGIA BRANCH</div>
				<div class="googleMap" id="googleMap1"></div>
				<div class="bd">
					<p>2300 Lakeview Parkway Suite 700</p>
					<p>Alpharetta, GA 30009</p>
					<p>(678) 916-3888</p>
				</div>
			</div>
		</div>

		<script>
		var map;
		function initMap() {
			var cairo = {lat:37.33521709839177, lng:-121.90007887094725};
			var cairo1 = {lat:34.05932936656904, lng:-84.29024900000002};
			map = new google.maps.Map(document.getElementById('googleMap'), {
				scaleControl: true,
				center: cairo,
				zoom: 10
			});
			var marker = new google.maps.Marker({map: map, position: cairo});

			map1 = new google.maps.Map(document.getElementById('googleMap1'), {
				scaleControl: true,
				center: cairo1,
				zoom: 10
			});
			var marker = new google.maps.Marker({map: map1, position: cairo1});
		}
		</script>
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6569ST34pV9m3ECxVXSakk8tz760nfAk&callback=initMap"></script>
		

		<div class="feedback">
			<div class="c-title">SEND US A MESSAGE!</div>
			<form id="ajaxForm" action="<{:U('Contact/save')}>" method="post" class="form-horizontal form-validata myform">
				<div class="form-group">
					<label>Name<span class="red">*</span></label>
					<div class="col5">
						<input type="text" name="firstName" id="firstName" class="form-control" placeholder="First Name" data-rule-required="true">
					</div>
					<div class="col5">
						<input type="text" name="lastName" id="lastName" class="form-control" placeholder="Last Name" data-rule-required="true">
					</div>
				</div>				

				<div class="form-group">
					<label class="col-md-2 control-label">Email<span class="red">*</span></label>
					<div class="col12">
						<input type="text" name="email" id="email" class="form-control" data-rule-required="true" data-rule-email="true">
					</div>
				</div>

				<div class="form-group">
					<label class="col-md-2 control-label">Phone</label>
					<div class="col12">
						<input type="text" name="tel" id="tel" class="form-control" data-rule-phone="true">
					</div>
				</div>

				<div class="form-group">
					<label class="col-md-2 control-label">Content<span class="red">*</span></label>
					<div class="col12">
						<textarea name="content" id="content" class="form-control" rows="10" data-rule-required="true"></textarea>
					</div>
				</div>

				<div class="form-group">
					<div class="col12">
						<button type="submit" id="form-btn" id="formBtn" class="btn">Submit</button>
						<span id="msg"></span>
					</div>
				</div>
			</form>
		</div>

		<div class="clearfix"></div>
	</div>

	<include file="Public:footer" />	
</div>

<script>
$(window).load(function() {
   changeImage();
   $(window).resize(function(){
   	 changeImage();
   })
});

function changeImage(){
	var scrWidth = $(window).width();
	var scrHeight = $(".contactBanner").height();
	var o = $(".banner-image");
	var imgWidth = o.width();
	var imgHeight = o.height();

	scr_b = scrWidth/scrHeight;
	img_b = imgWidth/imgHeight;

	if (scr_b > img_b){
		imgWidth = scrWidth;
  		o.width(scrWidth);
  		o.height("auto");
	}else{
		imgHeight = scrHeight;
  		o.height(scrHeight);
  		o.width("auto");
	}
	
  	var _x = (scrWidth - o.width())/2;
  	var _y = (scrHeight - o.height())/2;
  	o.css({'left':_x,'top':_y});	  	

}
</script>
</body>
</html>